<template>
  <view class="main">
    <view class="main_box" v-for="(item,index) in list" :key="index">
      <image :src="item.image" lazy-load mode=""></image>
      <view class="main_box_content">
        <view class="main_box_head">{{item.title}}</view>
        <view class="main_box_des ellipsis">{{item.des}}</view>
        <view class="main_box_price">
          <text>{{item.read|| 1}}人已看过</text>
          <view>
            <text>￥</text>
            <view>{{item.price}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  import { reactive, ref } from 'vue';
  const list = ref([])
  const data = [
    {
      image: '/static/taotaitupian/index_nav.png',
      title: '7天速成精品课？',
      read: 560, des: '此处为课程描述，很多很多很多多很多很多很...很多很...',
      o_price: 999,
      price: 666,
    }, {
      image: '/static/taotaitupian/index_nav2.png',
      title: '7天速成精品课？',
      read: 560, des: '此处为课程描述，很多很多很多多很多很多很...很多很...',
      o_price: 999,
      price: 666,
    }, {
      image: '/static/taotaitupian/index_nav.png',
      title: '7天速成精品课？',
      read: 560, des: '此处为课程描述，很多很多很多多很多很多很...很多很...',
      o_price: 999,
      price: 666,
    },
  ]
  const getList = () => {
    list.value.push(...data)
    uni.stopPullDownRefresh()
  }
  const params = reactive({
    pageIndex: 1,
    pageSize: 10
  })
  onReachBottom(() => {
    params.pageIndex++
    getList()
  })
  onPullDownRefresh(() => {
    params.pageIndex = 1
    list.value = []
    getList()
  })
  onLoad(() => {
    list.value.push(...data)
  })
</script>

<style scoped lang="less">
  .main {
    padding: 0 30rpx;
    box-sizing: border-box;
    background-color: #fff;
    font-family: PingFang SC;

    &_box {
      width: 690rpx;
      height: 915rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(17, 17, 17, 0.14);
      border-radius: 10rpx;
      margin-bottom: 28rpx;

      image {
        width: 690rpx;
        height: 713rpx;
        background: #FFB0B0;
        border-radius: 10rpx 10rpx 0rpx 0rpx;
      }
      &_content {
        padding: 30rpx 16rpx 34rpx 10rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      &_head {
        font-weight: bold;
        font-size: 32rpx;
        color: #333333;
      }

      &_des {
        font-size: 28rpx;
        color: #666666;
        margin-top: 5rpx;
        margin-bottom: 20rpx;
      }

      &_price {
        display: flex;
        justify-content: space-between;

        >text {
          font-weight: 500;
          font-size: 24rpx;
          color: #999999;
        }
        >view {
          display: flex;
          align-items: flex-end;
          font-weight: bold;
          font-size: 24rpx;
          color: #FA4058;
          view{
            font-size: 32rpx;
          }
        }
      }
    }
  }
</style>